import React from "react";
import "./index.css";
import { NavBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { EnvironmentOutline } from "antd-mobile-icons";
import { Discount } from "@react-vant/icons";
// import { AntOutline } from 'antd-mobile-icons'
function Index() {
  const navigate = useNavigate();
  return (
    <div>
      <NavBar onBack={() => navigate("/")}></NavBar>

      <div className="biaoti">
        <h2>选择你的位置</h2>
        <span>我们会根据你选择的位置，推荐当地热门的展馆活动</span>
      </div>
    {/* .完成位置选择页面功能，当选择使用我的位置时，使用高德地图定位api，定位当前城市，展示在页面中 */}
      <p className="sosu">
        <EnvironmentOutline
          fontSize={20}
          style={{ marginRight: "30px" }}
          color="orange"
        />
        <span>搜素</span>
      </p>
      <div className="dingwei" onClick={()=>navigate("/")}>
        <Discount />
        使用我当前的定位
      </div>

      <span>热门位置</span>

      <div className="city" onClick={()=>navigate("/")}>
        <div className="textding">
          <p>
            <b>杭州市</b>
          </p>
          <span>浙江省，杭州市</span>
        </div>
        <div>
          <div className="iconding">
            <EnvironmentOutline color="green" />
          </div>
        </div>
      </div>
      <div className="city" onClick={()=>navigate("/")}>
        <div className="textding">
          <p>
            <b>上海市</b>
          </p>
          <span>上海市</span>
        </div>
        <div>
          <div className="iconding">
            <EnvironmentOutline color="rgb(185, 148, 183)" />
          </div>
        </div>
      </div>
      <div className="city" onClick={()=>navigate("/")}>
        <div className="textding">
          <p>
            <b>北京市</b>
          </p>
          <span>北京市</span>
        </div>
        <div>
          <div className="iconding">
            <EnvironmentOutline color="rgb(203, 96, 140)" />
          </div>
        </div>
      </div>
    </div>
  );
}

export default Index;
